<template>
  <div class="login">
    <img src="../../static/images/login01.png" alt="" />
    <el-form :model="form">
      <el-form-item>
        <el-select
          v-model="form.region"
          placeholder="+86"
          style="width: 20%"
          size="mini"
          icon="el-icon-plus"
        >
          <el-option label="+86" value="shanghai"></el-option>
        </el-select>
        <el-input
          v-model="phone"
          placeholder="请输入手机号"
          style="width: 80%"
          size="mini"
        ></el-input>
        <el-input
          placeholder="请输入密码"
          show-password
          size="mini"
          v-model="password"
        ></el-input>
        <el-checkbox v-model="checked" class="login-zidongdengru"
          >自动登录</el-checkbox
        >
        <el-button style="width: 100%" type="danger" @click="goHome"
          >登 录</el-button
        >
        <router-link to="/register" @click="goRegist">注册</router-link>
      </el-form-item>
    </el-form>
    <!-- 微信，qq登录等图标展示 -->
    <el-button circle class="login-btnCircle iconfont icon-weixin"></el-button>
    <el-button circle class="login-btnCircle iconfont icon-weibo"></el-button>
    <el-button circle class="login-btnCircle iconfont icon-QQ"></el-button>
    <el-button
      circle
      class="login-btnCircle iconfont icon-wangyiyunyinle"
    ></el-button>
    <!-- 同意条款 -->
    <div>
      <el-checkbox v-model="checkedTwo" class="tongyi"
        >同意《服务条款》</el-checkbox
      >
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      dialogVisible: true, //控制dialog框的显示隐藏
      form: {
        region: "",
      },
      phone: "", //手机号信息
      password: "", //密码信息
      checked: false, //是否选中自动登录
      checkedTwo: false, //判断是否勾选同意规则
      // formLabelWidth: "20px",
    };
  },
  methods: {
    ...mapMutations("home", ["UPDATEDIALOGVISIBLE"]),

    //点击登录，跳转到首页
    async goHome() {
      if (!this.checkedTwo) {
        this.$message.error("请勾选同意服务规则,谢谢");
        return;
      }
      let { phone, password } = this; //拿到电话号码和密码
      //发送请求
      let res = await this.$API.login.gohome(phone, password);
      if (res.code !== 200) {
        //说明登录异常或错误
        this.$message.error("账户或密码错误，请重新输入");
        this.phone = "";
        this.password = "";
        return;
      }
      // console.log("res", res);
      //传递用户信息到localstorage中
      console.log("res", res);
      localStorage.setItem("cookie", res.cookie);
      if (this.checked) {
        localStorage.setItem("token", res.token); //如果勾选了自动登录存放到localtotage中
      } else {
        sessionStorage.setItem("token", res.token); //否则存放到sessiStorage中
      }
      localStorage.setItem("profile", JSON.stringify(res.profile));
      //路由跳转
      this.$router.history.push("/");
      // 将登录弹窗隐藏
      this.UPDATEDIALOGVISIBLE(false);
    },
    //点击注册，跳转到注册页面
    goRegist() {
      this.$router.history.push("/register");
    },
  },
  mounted() {
    //看localStorage中是否有值，有的话就直接登录，没有就不会执行
    let token = localStorage.getItem("token");
    if (token) {
      this.$router.history.push("/home");
    }
  },
};
</script>

<style scoped>
.login {
  /* width: 530px; */
  text-align: center;
}
.login-zidongdengru {
  float: left;
}
.login-btnCircle {
  margin: 0 20px;
}
.tongyi {
  margin-top: 20px;
}
/* .login-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
} */
</style>